<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/10 20:08:59
  @file: TransitionTest.vue
  @description:
  ```
  动画
  transition类名变更:
  v-enter → v-enter-from
  v-leave → v-leave-from
  Vue2中过度流程图：图中两个起始类名发生变化
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="TransitionTest">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
